<template>
  <div>
    <div v-if="currentUserId < 0" class="user-title">
      <span>请从用户管理，品种权限管理页进入当前页面使用</span>
    </div>
    <div v-else class="user-title">
      <span>系统号:</span>
      <span class="user-info">{{ userObj.ruizy_code }}</span>
      <span>昵称:</span>
      <span class="user-info">{{ userObj.nickname }}</span>
      <span>有效期:</span>
      <span class="user-info">{{ userObj.expire }}</span>
      <span>备注名:</span>
      <span class="user-info">{{ userObj.admin_name }}</span>
    </div>
    <div style="margin-top: 16px; padding-left: 15px">
      <el-select
        v-model="currentNameSpace"
        placeholder="选择有效空间"
        size="mini"
      >
        <el-option value="V01" label="定期报告"></el-option>
        <el-option value="V02" label="投顾策略"></el-option>
        <el-option value="V03" label="数据库"></el-option>
        <el-option value="V04" label="品种现货"></el-option>
      </el-select>
      <el-date-picker
        v-model="currentExpire"
        placeholder="选择有效期"
        size="mini"
        style="margin-left: 8px"
        value-format="yyyy-MM-dd"
      ></el-date-picker>
      <el-button
        type="primary"
        size="mini"
        style="margin-left: 8px"
        @click="dispatchAllVariety"
      >
        授权全品种
      </el-button>
    </div>
    <div style="margin-top: 16px; padding-left: 15px">
      <span>已有全品种的空间</span>
      <span style="margin-left: 20px">
        <el-tag v-for="item in allVarietySpaces" :key="item">
          {{ item }}
        </el-tag>
      </span>
    </div>
    <div style="padding: 15px">
      <el-table border stripe row-key="id" :data="varietyList">
        <el-table-column type="expand" label="详细" width="80px">
          <template #default="scope">
            <div
              style="padding: 10px 20px 10px 80px; background-color: #ececec"
            >
              <div class="space-container">
                <el-row
                  type="flex"
                  justify="start"
                  align="middle"
                  style="font-size: 16px"
                  :gutter="16"
                >
                  <el-col :span="6">空间名称</el-col>
                  <el-col :span="6">空间代码</el-col>
                  <el-col :span="6">有效期</el-col>
                  <el-col :span="6">权限</el-col>
                </el-row>
                <el-row
                  v-for="item in scope.row.accesses"
                  :key="item.name_space"
                  type="flex"
                  justify="start"
                  align="middle"
                  :gutter="16"
                >
                  <el-col :span="6">{{ item.space_name }}</el-col>
                  <el-col :span="6">{{ item.name_space }}</el-col>
                  <el-col :span="6">
                    <el-input
                      v-model="item.expire"
                      size="mini"
                      placeholder="yyyy-mm-dd"
                    ></el-input>
                  </el-col>
                  <el-col :span="6">
                    <el-switch
                      v-model="item.accessible"
                      @change="changeVarietyAccess(item)"
                    ></el-switch>
                  </el-col>
                </el-row>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="variety_name"
          label="品种"
          width="120px"
        ></el-table-column>
        <el-table-column
          prop="variety_en"
          label="代码"
          width="120px"
        ></el-table-column>
        <el-table-column
          prop="active_spaces"
          label="适用空间"
        ></el-table-column>
        <el-table-column prop="accesses_zh" label="权限空间"></el-table-column>
        <el-table-column
          prop="group_name"
          label="组别"
          width="100px"
        ></el-table-column>
        <el-table-column
          prop="exchange_name"
          label="交易所"
          width="100px"
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import {
    getUserVarietyAccess,
    AllocateUserVariety,
  } from '@/api/operations/user'
  export default {
    data() {
      return {
        currentNameSpace: '',
        currentExpire: '2099-12-31',
        currentUserId: -1,
        userObj: {
          ruizy_code: '',
          nickname: '',
          role: '',
        },
        varietyList: [],
        allVarietySpaces: [],
      }
    },
    mounted() {
      this.currentUserId = this.$route.query.uid
      if (this.currentUserId > 0) {
        this.getVariety()
      } else {
        this.currentUserId = -1
        this.$confirm('请从用户管理页面进入', '提示', {
          confirmButtonText: '确定',
          type: 'error',
          center: true,
        })
          .then(() => {
            this.$router.push({
              name: 'SmsUserManageResearch',
            })
          })
          .catch(() => {
            this.$router.push({
              name: 'SmsUserManageResearch',
            })
          })
      }
    },
    methods: {
      getVariety() {
        getUserVarietyAccess({ uid: this.currentUserId }).then((res) => {
          const data = res.data
          this.userObj = data.user
          this.varietyList = data.variety
          this.allVarietySpaces = data.space_all
        })
      },

      // 品种权限改变
      changeVarietyAccess(row) {
        const authData = {
          user_id: this.userObj.id,
          variety_en: row.variety_en,
          name_space: row['name_space'],
          expire: row.expire,
        }
        if (!authData.expire) {
          this.$baseMessage('请设置有效日期!', 'error')
          row.accessible = false
          return
        }
        AllocateUserVariety(authData).then((res) => {
          this.$baseMessage(res.msg, res.code === 200 ? 'success' : 'error')
          if (res.code !== 200) {
            row.accessible = false
          }
        })
      },

      // 授权空间内全品种
      dispatchAllVariety() {
        const authData = {
          user_id: this.userObj.id,
          variety_en: 'VAR_ALL', // 与后端约定的特别字符串
          name_space: this.currentNameSpace,
          expire: this.currentExpire,
        }
        AllocateUserVariety(authData).then((res) => {
          this.$baseMessage(res.msg, res.code === 200 ? 'success' : 'error')
          this.getVariety()
        })
      },
    },
  }
</script>

<style scoped lang="scss">
  .user-title {
    line-height: 24px;
    background-color: #1890ff;
    color: #ccc;
    padding: 2px 10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    .user-info {
      color: #efefef;
      margin-right: 10px;
      font-size: 18px;
    }
  }
  .space-container {
    width: 480px;
    background-color: #ffffff;
    padding: 10px 15px;
    .el-row {
      border: 1px solid #ebeef5;
    }
    .el-col {
      padding: 4px 0;
    }
  }
</style>
